<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            /* margin-left: 50px;
            margin-top: 50px; */
        }
    </style>
</head>

<body>
    <div></div>

    <script>
        /* 
            练习 拖拽边界值判断

            需求：
                + 给拖拽的元素加上一个边界值判断
                + 边界值只能在可视窗口内
                + 问题1:在什么位置判断
                    =》在拿到坐标和赋值之间进行边界值判断
                + 如何判断左边和上边边界？
                    =》左边和上边最小值一定是0，不能再小了
                + 如何判断右边的边界？
                    =》移动最大距离就是 可视窗口的宽度 - 盒子的宽度

            
        */

        // 获取元素
        let div = document.querySelector("div");

        // 提前准备一个变量当作开关
        let flag = false;
        let boxX = 0;
        let boxY = 0;

        div.onmousedown = function (e) {
            flag = true;
            boxX = e.offsetX
            boxY = e.offsetY
        }
        document.onmouseup = function () {
            flag = false;
        }
        document.onmousemove = function (e) {
            if (!flag) return;

            let x = e.clientX - boxX;
            let y = e.clientY - boxY;

            // 左边
            if(x <= 0) {
                x = 0;
            }
            // 上边
            if(y <= 0){
                y = 0;
            }
            // 右边
            if(x >= document.documentElement.clientWidth - div.offsetWidth){
                x = document.documentElement.clientWidth - div.offsetWidth
            }
            // 下边
            if(y >= document.documentElement.clientHeight - div.offsetHeight){
                y = document.documentElement.clientHeight - div.offsetHeight
            }


            div.style.left = x + "px";
            div.style.top = y + "px";

        }


    </script>
</body>

</html>